@WIN8_CALENDAR_BODY_WIDTH: 320px;
@WIN8_CALENDAR_HEIGHT: 348px;
@WIN8_CALENDAR_FOOTER_HEIGHT: 50px;

.dx-calendar {
    width: @WIN8_CALENDAR_BODY_WIDTH;
    height: @WIN8_CALENDAR_HEIGHT;
    background: @WIN8_CALENDAR_BACKGROUND;

    &.dx-calendar-with-footer {
        height: @WIN8_CALENDAR_HEIGHT + @WIN8_CALENDAR_FOOTER_HEIGHT + 10px;
        min-height: @WIN8_CALENDAR_HEIGHT + @WIN8_CALENDAR_FOOTER_HEIGHT + 10px;

        .dx-calendar-body {
            bottom: @WIN8_CALENDAR_FOOTER_HEIGHT + 5px;
        }

        .dx-calendar-footer {
            width: 100%;
            text-align: center;
            height: @WIN8_CALENDAR_FOOTER_HEIGHT;

            .dx-button {
                margin: 7px;
                height: 36px;
                width: auto;
                border-color: @WIN8_WHITE_COLOR;
                text-decoration: none;

                .dx-button-text {
                    color: @WIN8_WHITE_COLOR;
                    text-transform: none;
                }
            }
        }
    }
}

.dx-calendar-navigator {
    padding-left: 4px;
    height: 50px;

    .dx-calendar-caption-button {
        &.dx-state-hover {
            background-color: transparent;

            .dx-button-text {
                color: lighten(@WIN8_CALENDAR_ACTIVE, 15%);
            }
        }

        &.dx-state-active {
            background-color: transparent;

            .dx-button-text {
                color: @WIN8_ACCENT_COLOR_ACTIVE;
            }
        }

        text-align: left;

        &.dx-rtl, .dx-rtl & {
            text-align: right;
        }

        border: none;
        padding: 0;
        width: 70%;
        left: 0;

        .dx-button-text {
            color: @WIN8_CALENDAR_ACTIVE;
            text-transform: capitalize;
            font-size: 24pt;
            line-height: 50px;
            font-weight: 300;
        }
    }

    .dx-state-hover {
        &.dx-button {
            background-color: transparent;
        }
    }

    .dx-button:before {
        .box-sizing(content-box);
    }
}

.dx-calendar-navigator-previous-view,
.dx-calendar-navigator-next-view {
    width: 45px;
    height: 52px;
    border: 0;

    .dx-button-content {
        .dx-icon {
            display: none;
        }
    }

    &.dx-button {
        padding: 0;

        &.dx-state-active {
            background: transparent;
        }
    }

    &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        margin-top: -10px;
        margin-left: -10px;
        width: 20px;
        height: 20px;
        border: 1px solid @WIN8_CALENDAR_COLOR;
        border-radius: 50%;
        content: '';
    }

    &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        margin-top: -5px;
        margin-left: -3px;
        width: 0;
        height: 0;
        content: '';
    }
}

.dx-calendar-navigator-previous-view {
    left: 100%;
    margin-left: -76px;
}

.dx-calendar-navigator-next-view {
    left: 100%;
    margin-left: -40px;
}

.dx-calendar-navigator-previous-view:after {
    border-top: 6px solid transparent;
    border-right: 6px solid @WIN8_CALENDAR_COLOR;
    border-bottom: 6px solid transparent;
}

.dx-calendar-navigator-next-view:after {
    margin-left: -1px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid @WIN8_CALENDAR_COLOR;
}

.dx-calendar-navigator-next-view.dx-state-active:before,
.dx-calendar-navigator-previous-view.dx-state-active:before,
.dx-calendar-cell.dx-state-active:not(.dx-calendar-empty-cell) {
    background: @WIN8_ACCENT_COLOR_ACTIVE;
}

.dx-calendar-navigator-next-view.dx-state-hover:before,
.dx-calendar-navigator-previous-view.dx-state-hover:before {
    background: @WIN8_CALENDAR_ACTIVE;
}

.dx-calendar-cell.dx-calendar-selected-date {
    background-color: @WIN8_CALENDAR_ACTIVE;
    color: @WIN8_WHITE_COLOR;
}

.dx-calendar-view-month {
    .dx-calendar-body {
        th {
            padding-bottom: 1px;
        }

        th, td {
            font-size: 12pt;
        }
    }
}

.dx-calendar-view-year,
.dx-calendar-view-decade {
    td {
        font-size: 15pt;
    }
}

.dx-calendar-view-year,
.dx-calendar-view-decade,
.dx-calendar-view-century {
    .dx-calendar-body {
        margin-top: 25px;
    }
}

.dx-calendar-view-century {
    td {
        font-size: 10.5pt;
    }
}

.dx-calendar-body {
    top: 50px;

    .dx-widget {
        padding: 1px;
    }

    table {
        margin: -1px;
        border-collapse: collapse;
        border: 1px solid transparent;

        .dx-rtl & {
            margin: -1px 0;
        }
    }

    td, th {
        text-align: left;
        vertical-align: bottom;
        padding: 2px 4px;
    }

    td {
        width: 39px;
        border: 1px solid @WIN8_CALENDAR_COLOR;
    }

    th {
        height: 1px;
        font-size: 9pt;
        font-weight: 400;
    }
}

td.dx-calendar-today {
    position: relative;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border-top: 15px solid @WIN8_CALENDAR_ACTIVE;
        border-right: 15px solid transparent;
    }
}

td.dx-calendar-empty-cell {
    cursor: default;
    color: @WIN8_CALENDAR_OTHER_DAYS;
    background: @WIN8_CALENDAR_EMPTY_CELL_IMAGE;
}

td.dx-calendar-contoured-date {
    border: 1px double @WIN8_CALENDAR_ACTIVE;
}

td.dx-calendar-other-view {
    color: @WIN8_CALENDAR_OTHER_DAYS;
}

.dx-invalid {
    .dx-calendar-body {
        td {
            border-color: @WIN8_FADED_INVALID_COLOR;
        }
    }

    &.dx-state-focused {
        .dx-calendar-body {
            td {
                border-color: @WIN8_INVALID_COLOR;
            }
        }
    }
}
